<div class="row work-shop-proc">
    <div class="col-md-3 pr-0">
        <div style="padding: 10px;">
            <!-- <div class="h4" style="height: 30px;">工位选择</div>
      <div class="form-group">
        <select
          #stationCombobox
          name="station"
          class="form-control"
          [(ngModel)]="stationId"
          title="选择工位"
          (change)="selectgw($event)"
          required
        >
          <option [value]="" >请选择工位</option>
          <option *ngFor="let station of stations" [value]="station.id" >{{ station.stationName }}</option>
        </select>
      </div>
      <hr /> -->

            <div>
                <h4 style="height: 30px;">基础信息</h4>
                <div class="proc-info-item">
                    <span class="m-badge m-badge--success">任务</span>
                    <code>{{ procInfo.subTaskCode }}</code>
                </div>
                <div class="proc-info-item">
                    <span class="m-badge m-badge--success">图号</span>
                    <code>{{ procInfo.drawingCode }}</code>
                </div>

                <div class="proc-info-item">
                    <span class="m-badge m-badge--success">名称</span>
                    <code>{{ procInfo.taskName }}</code>
                </div>

                <div class="proc-info-item">
                    <span class="m-badge m-badge--success">数量</span>
                    <code>{{ procInfo.amountPlanned }}</code>
                </div>

                <div class="proc-info-item">
                    <span class="m-badge m-badge--success">工艺</span>
                    <code>{{ procInfo.techDocCode }}</code>
                </div>

                <div class="proc-info-item">
                    <span class="m-badge m-badge--success">质控</span>
                    <code>{{ procInfo.zhiKongKaNo }}</code>
                </div>

                <!-- <div class="proc-info-item">
                    <span class="m-badge m-badge--success">组员</span>
                    <code>{{ procInfo.assignedToUserName }}</code>
                </div>

                <div class="proc-info-item">
                    <span class="m-badge m-badge--success">时间</span>
                    <code>{{ procInfo.assignedToUserDate }}</code>
                </div> -->
            </div>
        </div>
    </div>

    <div class="col-md-9 pl-0">
        <div style="padding: 10px;">
            <div class="alert alert-info">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="note note-success" style="padding: 11px;">
                            <h5 class="block">工序状态:</h5>
                            <em>{{ procInfo.statusName }}</em>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <!-- <div class="note note-success" style="padding: 11px;">
              <h5 class="block">工位信息:</h5>
              <em>[ {{ station.stationName }} ] -- [ {{ station.ip }} ] -- [ {{ station.chargeBy }} ]</em>
            </div> -->
                    </div>
                </div>
                <!-- <em>通过 <b>开始|暂停|完成|重置</b> 按钮来操作该工序...</em> -->
            </div>

            <div class="row" style="margin-top: 40px; margin-bottom: 30px;">
                <div class="col-md-12">
                    <div
                        class="m-btn-group m-btn-group--pill btn-group zhixing"
                        role="group"
                        aria-label="..."
                        style="width: 100%;"
                    >
                        <button
                            type="button"
                            class="btn btn-secondary m-btn m-btn--custom m-btn--label-info"
                            style="width: 30%;"
                            (click)="start()"
                            [disabled]="
                                procInfo.statusName !== '初始' &&
                                procInfo.statusName !== '暂停'
                            "
                        >
                            <i class="fa fa-play text-info"></i>开 始
                        </button>
                        <button
                            type="button"
                            class="btn btn-secondary m-btn m-btn--custom m-btn--label-danger"
                            style="width: 30%;"
                            (click)="pause()"
                            [disabled]="procInfo.statusName !== '进行'"
                        >
                            <i class="fa fa-pause text-danger"></i>暂 停
                        </button>
                        <button
                            type="button"
                            class="btn btn-secondary m-btn m-btn--custom m-btn--label-success"
                            style="width: 30%;"
                            (click)="finish()"
                            [disabled]="procInfo.statusName !== '进行'"
                        >
                            <i class="fa fa-step-forward text-success"></i>完 成
                        </button>
                        <button
                            type="button"
                            class="btn btn-secondary m-btn m-btn--custom m-btn--label-default"
                            style="width: 10%; padding: 0;"
                            (click)="restart()"
                            [disabled]="procInfo.statusName == '初始'"
                        >
                            <i class="fa fa-refresh"></i>重 置
                        </button>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <!-- <div class="h5" style="height: 30px;">设备选择</div> -->
                    <div class="form-group row">
                        <div class="col-4">
                            <p-multiSelect
                                [options]="shebei"
                                name="shebei"
                                optionLabel="displayText"
                                [(ngModel)]="selectshebei"
                                defaultLabel="请选择设备"
                            ></p-multiSelect>
                        </div>
                        <div class="col-8 gongzhuang">
                            <p-multiSelect
                                name="gongzhuang"
                                [options]="gongzhuang"
                                optionLabel="displayText"
                                [(ngModel)]="selectgongzhuang"
                                defaultLabel="请选择工装"
                            ></p-multiSelect>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <p-table
                        [value]="nodeWorker"
                        [paginator]="true"
                        [rows]="10"
                    >
                        <ng-template pTemplate="caption">
                            人员及工时分配
                        </ng-template>
                        <ng-template pTemplate="header">
                            <tr>
                                <th style="width:2em"></th>
                                <th>人员姓名</th>
                                <th>工时占比(%)</th>
                            </tr>
                        </ng-template>
                        <ng-template pTemplate="body" let-rowData>
                            <tr>
                                <td style="height: 36px;"></td>
                                <td pEditableColumn>
                                    <p-cellEditor>
                                        <ng-template pTemplate="input">
                                            <p-dropdown
                                                [options]="users"
                                                [(ngModel)]="rowData.userName"
                                                [style]="{ width: '100%' }"
                                                optionLabel="name"
                                            ></p-dropdown>
                                        </ng-template>
                                        <ng-template pTemplate="output">
                                            {{ rowData.userName.name }}
                                        </ng-template>
                                    </p-cellEditor>
                                </td>
                                <td pEditableColumn>
                                    <p-cellEditor>
                                        <ng-template pTemplate="input">
                                            <p-spinner
                                                size="55"
                                                [(ngModel)]="
                                                    rowData.timePercentage
                                                "
                                                [min]="0"
                                                [max]="100"
                                            ></p-spinner>
                                        </ng-template>
                                        <ng-template pTemplate="output">
                                            {{ rowData.timePercentage }}
                                        </ng-template>
                                    </p-cellEditor>
                                </td>
                            </tr>
                        </ng-template>
                        <ng-template pTemplate="summary" let-rowData>
                            <div style="text-align:left">
                                <button
                                    type="button"
                                    pButton
                                    icon="fa fa-plus"
                                    (click)="showDialogToAdd()"
                                    label="新增"
                                ></button>
                            </div>
                        </ng-template>
                    </p-table>
                    <!-- <p-dialog header="编辑" [(visible)]="displayDialog" [responsive]="true" showEffect="fade" [modal]="true" [draggable]="false" [style]="{width: '400px'}">
                <div class="ui-g ui-fluid" *ngIf="selected">
                    <div class="ui-g-12">
                        <div class="ui-g-4">
                            <label for="vin">姓名</label>
                        </div>
                        <div class="ui-g-8">

                            <p-dropdown [options]="result" [(ngModel)]="selected.userName" placeholder="Select a City" optionLabel="name" [showClear]="true"></p-dropdown>
                        </div>
                    </div>
                    <div class="ui-g-12">
                        <div class="ui-g-4">
                            <label for="color">工时占比</label>
                        </div>
                        <div class="ui-g-8">

                        </div>
                    </div>
                </div>
                <p-footer>
                    <div class="ui-dialog-buttonpane ui-helper-clearfix">
                        <button type="button" pButton icon="fa fa-close" (click)="delete()" label="Delete"></button>
                        <button type="button" pButton icon="fa fa-check" (click)="save()" label="Save"></button>
                    </div>
                </p-footer>
            </p-dialog> -->
                </div>
            </div>
            <!-- <h4 style="height: 30px;">资 源</h4>
      <div>
        <table class="table table-bordered table-striped">
          <thead>
            <tr>
              <th>名称</th>
              <th>类型</th>
              <th>规格</th>
              <th>是否必须</th>
            </tr>
          </thead>
          <tbody></tbody>
        </table>
      </div> -->
        </div>
    </div>
</div>
